<template>
  <div id="app">
    <router-view></router-view>
    <div class="footer" v-show="show">
      <el-row>
        <router-link to="/home" class="home" active-class="homeActive">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span></span>
              <p class="cor">首页</p>
            </div>
          </el-col>
        </router-link>
        <router-link to="/journey" class="journey" active-class="journeyActive">
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span></span>
              <p class="cor">行程</p>
            </div>
          </el-col>
        </router-link>
        <router-link to="/find" class="find" active-class="findActive">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span></span>
              <p class="cor">发现</p>
            </div>
          </el-col>
        </router-link>
        <router-link to="/mine" class="mine" active-class="mineActive">
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span></span>
              <p class="cor">我的</p>
            </div>
          </el-col>
        </router-link>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data:function(){
    return {
      show:eventBus.shows
    }
  }
}
</script>

<style lang="scss">
*{
  margin:0;
  padding:0;
}
#app {
  .footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 65px;
    border-top:1px solid #ccc;
    background-color: white;
    .grid-content{
      text-align: center;
      padding-top: 8px;
      box-sizing: border-box;
      span{
        display: block;
        width: 30px;
        height: 30px;
        margin:0 auto;
      }
      p{
        color: black;
        margin-top: 2px;
      }
    }
    .home{
      span{
        background: url('./assets/home.png');
        background-size: 100% 100%;
      }
      p{
        color: black;
      }
    }
    .homeActive{
      span{
        background:url('./assets/home1.png');
        background-size: 100% 100%;
      }
      p{
        color:#36ab60;
      }
    }
    .journey{
      span{
        background: url('./assets/journey.png');
        background-size: 100% 100%;
      }
      p{
        color: black;
      }
    }
    .journeyActive{
      span{
        background:url('./assets/journey1.png');
        background-size: 100% 100%;
      }
      p{
        color:#36ab60;
      }
    }
    .find{
      span{
        background: url('./assets/find.png');
        background-size: 100% 100%;
      }
      p{
        color: black;
      }
    }
    .findActive{
      span{
        background:url('./assets/find1.png');
        background-size: 100% 100%;
      }
      p{
        color:#36ab60;
      }
    }
    .mine{
      span{
        background: url('./assets/mine.png');
        background-size: 100% 100%;
      }
      
    }
    .mineActive{
      span{
        background:url('./assets/mine1.png');
        background-size: 100% 100%;
      }
      p{
        color:#36ab60;
      }
    }
  }
}
</style>
